<template>
  <div class="panoramaComp">
    <div class="krpanoPanorama">
      <Krpano
        v-if="!!srcId"
        :srcId="srcId"
        :QjList="QjList"
        :offset="offset"
        ref="krpano"
        v-bind="$attrs"
      ></Krpano>
    </div>
    <!-- 底部栏 -->
    <div class="bottomListComp">
      <div class="left" id="leftComp"></div>
      <div class="right">
        <!-- 上一条 -->
        <div class="last" @click="lastPicture" @mouseleave="panoramaLeave()">
          <svg-icon class="svg_icon_arrow" icon-class="upPanorama" />
        </div>
        <!-- 全景 -->
        <div class="panoramas">
          <!-- 场景 -->
          <div
            v-for="item in QjList"
            :key="item.mark_id"
            @mouseenter="panoramaEnter(item, item.mark_id)"
            @mouseleave="panoramaLeave()"
            :class="`${hoverIndex === item.mark_id ? 'hoverPanoramaDiv' : ''} ${
              selectIndex === item.mark_id ? 'selectPanoramaDiv' : ''
            }`"
            @click="changePanorama(item.scenes[item.scenes.length - 1], item)"
          >
            <!-- 单个地区的全景 -->
            <div class="panorama">
              <!-- 图片 -->
              <img
                :src="
                  urlAddToken(
                    selectIndex === item.mark_id
                      ? selectPanorama[selectPanorama.length - 1].thumbnail
                      : item.scenes[item.scenes.length - 1].thumbnail
                  )
                "
                v-if="item.scenes.length > 0"
                alt=""
                :class="`${
                  hoverIndex === item.mark_id ? 'hoverPanoramaClass' : ''
                } ${selectIndex === item.mark_id ? 'selectPanoramaClass' : ''}`"
                class="panoramaImg"
              />
              <div v-else class="panoramaImg"></div>
              <svg-icon
                class="svg_icon_time"
                icon-class="time"
                v-if="hoverIndex === item.mark_id"
              />

              <div class="panoramaTime">
                <!--  -->
                <div
                  class="inner first"
                  :class="{ innerWidth: item.name.length < 10 }"
                  :style="animationText(item)"
                >
                  {{ item.name }}
                </div>
                <div
                  class="inner second"
                  :class="{ innerWidth: item.name.length < 10 }"
                  :style="animationText(item)"
                >
                  {{ item.name }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 下一条 -->
        <div class="next" @click="nextPicture" @mouseleave="panoramaLeave()">
          <svg-icon class="svg_icon_arrow" icon-class="downPanorama" />
        </div>

        <!-- 全景的时间列表 -->
        <div class="timerDiv">
          <div class="timerTop" v-show="ifTop" @click="upSlideList">· · ·</div>

          <div
            v-show="hoverList"
            class="panoramaTimer"
            @mouseenter="panoramaEnter()"
            @mouseleave="panoramaLeave()"
            @scroll="scrollEvent"
          >
            <div
              v-for="timer in selectQj.scenes"
              :key="timer.qj"
              class="date"
              :class="{ selectDate: selectTimerQJ === timer.qj }"
              @click="changePanorama(timer, selectQj)"
            >
              {{ timer.date.split(" ")[0] }}
            </div>
          </div>

          <div class="timerBottom" v-show="ifBottom" @click="slideList">
            · · ·
          </div>
        </div>
      </div>
    </div>

    <div class="krpanoSetting">
      <div class="settingSwitchBox">
        <div class="svgBox" @click.stop="settingVisibleChange">
          <svg-icon icon-class="qj_setting"></svg-icon>
        </div>
        <div class="switchBox" v-show="settingVisible">
          <div class="switchContent" @click="issEyeChange">
            <div class="switchSvg">
              <svg-icon icon-class="new_eye_open" v-if="issEye"></svg-icon>
              <svg-icon icon-class="new_eye_close" v-else></svg-icon>
            </div>
            <div class="switchText">附近问题</div>
          </div>
          <div class="switchContent" @click="qjEyeChange">
            <div class="switchSvg">
              <svg-icon icon-class="new_eye_open" v-if="qjEye"></svg-icon>
              <svg-icon icon-class="new_eye_close" v-else></svg-icon>
            </div>
            <div class="switchText">其他全景</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { addUrlToken } from "@/utils/allTool";
import Krpano from "./PanoramaComps/krpano.vue";
export default {
  name: "panoramaComp",
  props: {
    selectPanorama: {
      default() {
        return [];
      },
    },
    QjList: {
      default() {
        return [];
      },
    },
    selectPanoramaIndex: {
      default() {
        return [];
      },
    },
  },
  components: {
    Krpano,
  },
  data() {
    return {
      selectIndex: null, // 选中的全景index
      selectTimerQJ: "", // 选中的全景路径
      selectQj: {}, // 选中的全景
      hoverIndex: "", // 移动到当前全景的index
      ifTop: false,
      ifBottom: false,
      hoverList: false, // 移动上去的列表
      mouseOut: null, // 鼠标离开定时器
      flag: false,
      srcId: null, // 全景路径id
      selectKrpano: {}, // 选中的场景
      offset: 0, // 偏移量
      ifKrpanoChange: true, // 是否可变化

      settingVisible: false,
      issEye: true,
      qjEye: true,
    };
  },
  mounted() {
    if (this.selectIndex === null) {
      this.selectIndex = this.selectPanoramaIndex;
    }
    var leftComp = document.getElementById("leftComp");
    this.$bus.on("closePanoramaText", (flag) => {
      if (flag) {
        leftComp.style.width = "400px";
      } else {
        leftComp.style.width = "200px";
      }
    });

    this.selectKrpano = this.selectPanorama[this.selectPanorama.length - 1];
    this.selectTimerQJ = this.selectKrpano.qj;
    this.offset = this.selectKrpano.offset;
    if (localStorage.hasOwnProperty("qjEye")) {
      if (localStorage.getItem("qjEye") == "true") {
        this.qjEye = true;
      } else {
        this.qjEye = false;
      }
    } else {
      localStorage.setItem("qjEye", this.qjEye);
    }

    if (localStorage.hasOwnProperty("issEye")) {
      if (localStorage.getItem("issEye") == "true") {
        this.issEye = true;
      } else {
        this.issEye = false;
      }
    } else {
      localStorage.setItem("issEye", this.issEye);
    }
  },
  methods: {
    urlAddToken(url) {
      return addUrlToken(url);
    },
    // ! 上一张图片
    lastPicture() {
      let panoramas = document.querySelector(".panoramas");
      panoramas.scrollLeft -= 200;
      this.hoverIndex = "";
    },
    // ! 下一张图片
    nextPicture() {
      let panoramas = document.querySelector(".panoramas");
      panoramas.scrollLeft += 200;
      this.hoverIndex = "";
    },
    // ! 列表上滑···
    upSlideList() {
      let panoramaTimer = document.querySelector(".panoramaTimer");
      panoramaTimer.scrollTop -= 100;
    },
    // ! 列表下滑···
    slideList() {
      let panoramaTimer = document.querySelector(".panoramaTimer");
      panoramaTimer.scrollTop += 100;
    },

    // ! 鼠标滚动
    scrollEvent(e) {
      let top = e.target.scrollTop;
      let height = e.target.scrollHeight;
      let cHeight = e.target.clientHeight;
      let offsetHeight = Math.ceil(e.target.getBoundingClientRect().height);
      let currentHeight = Math.abs(top) + offsetHeight;

      // currentHeight 处于高度
      // height div 父 高度
      // offsetHeight 子 高度

      let panoramaTimer = document.querySelector(".panoramaTimer");
      if (cHeight < height) {
        if (currentHeight >= height) {
          this.ifTop = false;
          this.ifBottom = true;
        } else if (currentHeight <= offsetHeight) {
          this.ifBottom = false;
          this.ifTop = true;
        } else {
          this.ifTop = true;
          this.ifBottom = true;
        }
      } else {
        this.ifBottom = false;
        this.ifTop = false;
      }
    },

    // ! 鼠标移入
    panoramaEnter(item, index) {
      // 打开定时器
      if (!this.flag) {
        this.flag = true;
      }
      if (item && item.scenes && Array.isArray(item.scenes)) {
        this.hoverList = true;
        this.hoverIndex = index;
        this.selectQj = item;

        this.$nextTick(() => {
          let parentDoc = document.querySelector(".panoramaTimer");
          let childDoc = document.querySelector(".selectDate");
          this.scrollEvent({ target: parentDoc });
          // 变更滚动条位置
          if (childDoc) {
            parentDoc.scrollTop =
              childDoc.offsetTop - parentDoc.offsetHeight / 2;
          } else {
            parentDoc.scrollTop = -parentDoc.offsetHeight;
          }

          // 列表
          let hoverPanorama = document.querySelector(".hoverPanoramaDiv");
          let panoramas = document.querySelector(".panoramas");
          let timerDiv = document.querySelector(".timerDiv");
          timerDiv.style.left =
            hoverPanorama.offsetLeft - panoramas.scrollLeft + 5 + "px";
        });
      }
    },
    // ! 鼠标移出
    panoramaLeave() {
      let _this = this;
      _this.flag = false;
      setTimeout(() => {
        if (!_this.flag) {
          _this.hoverList = false;
          _this.hoverIndex = "";
          _this.ifBottom = false;
          _this.ifTop = false;
        }
      }, 500);
    },

    animationText(data) {
      let time = 5;
      if (data.name.length < 10) {
        time = 5;
      } else if (10 < data.name.length < 20) {
        time = data.name.length / 2;
      } else {
        time = 10;
      }
      return `animation-duration:${time}s`;
    },
    // ! 更换全景
    changePanorama(panorama, Qj) {
      this.selectKrpano = panorama;
      this.ifKrpanoChange = false;
      this.offset = this.selectKrpano.offset;
      this.srcId = panorama.qj.split("?scene_id=")[1];
      if (Qj.mark_id !== this.selectIndex) {
        this.$bus.emit("getQjMark", Qj.mark_id);
        this.$bus.emit("changeQj", Qj);
      }
      this.selectTimerQJ = panorama.qj;
      if (this.hoverIndex) {
        this.selectIndex = this.hoverIndex;
      } else {
        this.selectIndex = this.selectIndex;
      }

      this.$nextTick(() => {
        // ? 变更滚动条位置
        let parentDoc = document.querySelector(".panoramaTimer");
        let childDoc = document.querySelector(".selectDate");
        this.scrollEvent({ target: parentDoc });
        if (childDoc) {
          parentDoc.scrollTop = childDoc.offsetTop - parentDoc.offsetHeight / 2;
        } else {
          parentDoc.scrollTop = parentDoc.offsetHeight;
        }

        // ? 变更导航栏位置
        let selectNavBottom = document.querySelector(".selectPanoramaDiv");
        let panoramas = document.querySelector(".panoramas");
        if (selectNavBottom) {
          panoramas.scrollLeft =
            selectNavBottom.offsetLeft - panoramas.offsetWidth / 2;
        } else {
          panoramas.scrollLeft = panoramas.offsetWidth;
        }

        // ? 列表
        let timerDiv = document.querySelector(".timerDiv");
        timerDiv.style.left =
          selectNavBottom.offsetLeft - panoramas.scrollLeft + 5 + "px";
      });
      this.hoverIndex = "";

      this.$bus.emit("changePanorama", Qj.scenes);
    },
    // 设置显示
    settingVisibleChange() {
      this.settingVisible = !this.settingVisible;
    },
    // 问题显示
    issEyeChange() {
      this.issEye = !this.issEye;
      localStorage.setItem("issEye", this.issEye);
      this.$refs.krpano.issChange(this.issEye);
    },
    // 全景显示
    qjEyeChange() {
      this.qjEye = !this.qjEye;
      localStorage.setItem("qjEye", this.qjEye);
      this.$refs.krpano.qjChange(this.qjEye);
    },
  },
  computed: {},
  watch: {
    selectPanorama: {
      handler(newVal, oldVal) {
        if (this.ifKrpanoChange) {
          this.selectKrpano = newVal[newVal.length - 1];
          this.selectTimerQJ = this.selectKrpano.qj;
          this.offset = this.selectKrpano.offset;
          this.srcId = this.selectTimerQJ.split("?scene_id=")[1];

          this.$nextTick(() => {
            // ? 变更滚动条位置
            let parentDoc = document.querySelector(".panoramaTimer");
            let childDoc = document.querySelector(".selectDate");
            this.scrollEvent({ target: parentDoc });
            if (childDoc) {
              parentDoc.scrollTop =
                childDoc.offsetTop - parentDoc.offsetHeight / 2;
            } else {
              parentDoc.scrollTop = parentDoc.offsetHeight;
            }

            // ? 变更导航栏位置
            let selectNavBottom = document.querySelector(".selectPanoramaDiv");
            let panoramas = document.querySelector(".panoramas");
            if (selectNavBottom) {
              panoramas.scrollLeft =
                selectNavBottom.offsetLeft - panoramas.offsetWidth / 2;
            } else {
              panoramas.scrollLeft = panoramas.offsetWidth;
            }

            // ? 列表
            let timerDiv = document.querySelector(".timerDiv");
            timerDiv.style.left =
              selectNavBottom.offsetLeft - panoramas.scrollLeft + 5 + "px";
          });
        } else {
          this.ifKrpanoChange = true;
        }
      },
      immediate: true,
      deep: true,
    },
  },
  beforeDestroy() {
    // 重置视角
    // this.$bus.emit("EarthResetView", "");
    this.$bus.off("closePanoramaText");
  },
};
</script>

<style lang="scss" scoped>
.panoramaComp {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;

  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  .krpanoPanorama {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: auto;
    // background-color: skyblue;

    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
    .KrpanoFrame {
      width: 100%;
      height: 100%;
    }
  }
  .bottomListComp {
    pointer-events: auto;
    position: absolute;
    bottom: 50px;
    transform: translate(-50%);
    left: 50%;

    width: 60%;
    height: 100px;
    line-height: 100px;
    background-color: #00000050;
    display: flex;
    z-index: 0;
    .left {
      z-index: 0;
      border: 5px solid #333333;
      width: 200px;
      height: 100%;
      // background-color: skyblue;
      cursor: pointer;
      transform: translateY(0px);
      transition: all 0.25s ease-in 0s;
      position: relative;
    }
    .right {
      flex: 1 0 auto;
      display: flex;
      position: relative;
      .svg_icon_arrow {
        width: 100%;
        height: 100%;
        color: #eee;
      }
      .last {
        width: 35px;
        // background-color: red;
      }
      .next {
        width: 35px;
        // background-color: red;
      }
      .panoramas {
        transition: all 1s linear 0s;
        flex: 1;
        display: flex;
        overflow-x: auto;
        width: 500px;
        height: 500%;
        white-space: nowrap; /*强制不换行*/
        bottom: 0;
        .panorama {
          position: relative;
          width: 120px;
          height: 80px;
          background: blue
            url("http://fsimage.guihuao.com/mark_tag_icon/qb251abu77.png")
            no-repeat 100% 100%;
          background-size: contain;
          cursor: pointer;
          margin: 10px 5px;
          .svg_icon_time {
            position: absolute;
            top: 5px;
            left: 5px;
            width: 40px;
            height: 40px;
            color: #eebf70;
            pointer-events: none;
          }
          .panoramaImg {
            width: 100%;
            height: 100%;
            border: 3px solid #fff;
          }
          .selectPanoramaClass {
            border: 3px solid #eebf70;
          }
          .hoverPanoramaClass {
            border: 3px solid #eebf70;
          }

          .panoramaTime {
            position: absolute;
            bottom: 0px;
            background-color: #00000080;
            color: #fff;
            height: 30px;
            line-height: 30px;
            width: 100%;

            overflow: hidden;
            white-space: nowrap;

            .inner {
              position: absolute;
              // width: 100%;
            }
            .innerWidth {
              width: 100%;
            }
            .first {
              animation-name: first;
              animation-iteration-count: infinite;
              animation-timing-function: linear;
              // animation: first 5s linear infinite;
            }
            .second {
              animation-name: second;
              animation-iteration-count: infinite;
              animation-timing-function: linear;
              // animation: second 5s linear infinite;
            }

            @keyframes first {
              0% {
                transform: translateX(0%);
              }
              100% {
                transform: translateX(-110%);
              }
            }

            @keyframes second {
              0% {
                transform: translateX(110%);
              }
              100% {
                transform: translateX(0%);
              }
            }
          }
        }
      }
      .timerDiv {
        position: absolute;
        left: 0;
        bottom: 110px;
        .panoramaTimer {
          display: flex;
          flex-direction: column-reverse;
          height: 150px;
          overflow: auto;
          .selectDate {
            background-color: #00000090;
            color: skyblue;
          }
        }
        .timerTop {
          position: absolute;
          bottom: 155px;
          width: 120px;
          height: 10px;
          line-height: 10px;
          text-align: center;
          font-size: 20px;
          font-weight: 700;
          background-color: #00000050;
          color: #fff;
          cursor: pointer;
        }
        .timerBottom {
          position: absolute;
          bottom: -10px;
          width: 120px;
          height: 10px;
          line-height: 10px;
          text-align: center;
          font-size: 20px;
          font-weight: 700;
          background-color: #00000050;
          color: #fff;
          cursor: pointer;
        }
        .date {
          width: 120px;
          height: 20px;
          line-height: 20px;
          text-align: center;
          background-color: #00000050;
          color: #fff;
          margin-bottom: 5px;
          font-size: 14px;
          cursor: pointer;
        }
      }
    }
  }
  .krpanoSetting {
    position: absolute;
    bottom: 155px;
    right: 20%;
    .settingSwitchBox {
      pointer-events: auto;
      position: relative;
      .svgBox {
        cursor: pointer;
        height: 40px;
        width: 40px;
        background-color: #00000050;
        display: flex;
        align-items: center;
        justify-content: center;
        right: 0;
        bottom: 0;
        .svg-icon {
          color: #fff;
          width: 20px;
          height: 20px;
        }
      }
      .switchBox {
        position: absolute;
        bottom: 45px;
        right: 0;
        background-color: #7f7f7f;
        border-radius: 5px;
        padding: 10px;
        color: #fff;
        .switchContent {
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 2px 0px;
          cursor: pointer;
          .switchSvg {
            margin-right: 5px;
            background-color: #02a7f0;
            border-radius: 5px;
            padding: 1px;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .switchText {
            width: 70px;
          }
        }
      }
    }
  }
}
</style>
